<template>
  <div>
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="range-audio c-bg-sgray c-br40">
      <div class="c-flex-row c-w100 c-aligni-center c-pr16">
        <img :src="isPlaying == 0 ? require('@/assets/i/wap/voting/playAudio.png') : require('@/assets/i/wap/voting/pauseAudio.png')" alt="c-w100" class="c-ww50 c-hh50" @click="playAudio">
        <div class="c-w100 c-pr16 c-pl20">
          <vue-slider :height="2" v-model="audioValue" :max="parseInt(allTime) > 0 ? parseInt(allTime) : 5" @drag-start="touchstart" @drag-end="touchend" @change="rangChange" :processStyle="processStyle" :railStyle="railStyle">
          </vue-slider>
        </div>
        <span v-if="parseInt(allTime) > 0" class="range-max">{{dataTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
//import { utilJs } from "@/utils/common.js";
//let isLoading = false;
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css";
let myAudio = ''
export default {
  components: {
    // Range,
    VueSlider
  },
  props: {
    playAduioSrc: {
      type: String,
      default: ""
    },
    allTime: {
      type: Number,
      default: 0
    },
    processStyle: {
      type: String,
      default: 'background-color: #008cff'
    },
    railStyle: {
      type: String,
      default: 'background-color: #cccccc'
    }
  },
  watch: {
    playAduioSrc(val) {
      this.audioUrl = val;
    },
    dataTime(val) {
      console.log('88888', val)
    },
    allTime(val) {
      if (this.allTime > 60) {
        let min = parseInt(this.allTime / 60)
        let ss = parseInt(this.allTime % 60)
        if (min < 10) {
          min = '0' + min
        }
        if (ss < 10) {
          ss = '0' + ss
        }
        this.dataTime = min + ':' + ss
      } else {
        if (this.allTime < 10) {
          this.dataTime = "00:0" + parseInt(this.allTime)
        } else {
          this.dataTime = "00:" + parseInt(this.allTime)
        }
      }
    }
  },
  data() {
    return {
      audioDuration: 0,
      audioUrl: '',
      isPlaying: 0,
      stepTime: 1,
      audioValue: 0,
      dataTime: '00:00',
      recordTimeCon: null
    };
  },
  created() {
    if (this.allTime > 60) {
      let min = parseInt(this.allTime / 60)
      let ss = parseInt(this.allTime % 60)
      if (min < 10) {
        min = '0' + min
      }
      if (ss < 10) {
        ss = '0' + ss
      }
      this.dataTime = min + ':' + ss
    } else {
      if (this.allTime < 10) {
        this.dataTime = "00:0" + parseInt(this.allTime)
      } else {
        this.dataTime = "00:" + parseInt(this.allTime)
      }
    }
  },
  mounted() {
    document.getElementById("audio").src = this.playAduioSrc;
    this.audioDuration = document.getElementById('audio').duration
    document.getElementById("audio").addEventListener("canplay", this.audioCanPlay);
  },
  methods: {
    audioCanPlay(e) {
      this.$emit("audioCanplay", e.target.duration);
    },
    // 拉动进度条
    rangChange(e) {
      if (e >= this.allTime) {
        clearInterval(this.recordTimeCon)
        setTimeout(() => {
          this.audioValue = 0
          this.isPlaying = 0
        }, 1000)
      }
      //this.audioValue = e
    },
    // 触摸滚动元素时
    touchstart(e) {
      if (this.isPlaying == 1) {
        document.getElementById('audio').pause()
      }
      this.recordTimeCon && clearInterval(this.recordTimeCon)
    },
    // 放开滚动元素时
    touchend(e) {
      if (this.isPlaying == 1) {
        this.playAudio(0)
      }
    },
    playAudio(isRang) {
      if (isRang == 0) {
        this.isPlaying = isRang
      }
      let that = this
      this.recordTimeCon && clearInterval(this.recordTimeCon);
      if (this.isPlaying == 1) {
        this.isPlaying = 0
        document.getElementById('audio').pause()
        return;
      }
      //返回mp3则用audio播放
      if (this.playAduioSrc) {
        if (this.audioValue > 0) {
          document.getElementById('audio').currentTime = this.audioValue;
        } else {
          document.getElementById("audio").src = this.playAduioSrc;
        }
        document.getElementById('audio').play();
        this.recordTimeCon = setInterval(() => {
          if (that.audioValue <= that.allTime) {
            that.audioValue = that.audioValue + that.stepTime
          } else {
            clearInterval(this.recordTimeCon)
            this.playAudioEnd()
          }
        }, 1000);
      }
      this.isPlaying = 1
    },
    playAudioEnd() {
      clearInterval(this.recordTimeCon);
      //setTimeout(() => {
      this.isPlaying = 0
      this.audioValue = 0
      //}, 1000)
    }
  },
  activated() {
    this.audioUrl = this.playAduioSrc
    //this.stepTime = 100 / this.allTime
    myAudio = document.getElementById('audio')
    myAudio.src = this.playAduioSrc;
    this.audioValue = 0
    //recordTimeCon = ''
  },
  deactivated() {
  },
  destroyed() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.range-audio .range-min {
  display: none;
}
.range-max {
  color: #999999;
  font-size: 0.5rem;
}
.range-audio .range-bar .range-handle {
  width: 0.45rem;
  height: 0.45rem;
  top: -0.2rem !important;
}
.range-audio .vux-range-input-box {
  margin-left: 0.35rem !important;
  margin-right: 1.8rem !important;
}
.range-audio .range-bar .range-quantity {
  background-color: #008cff;
}
.range-audio .range-bar {
  background-color: #cccccc;
}
.range-audio .range-max {
  width: 1.4rem;
}
.range-audio .range-max {
  right: -1.8rem;
  width: 1.7rem;
  text-align: center;
}
.ptsil {
  padding-top: 0.26rem;
}
.vue-slider .vue-slider-rail {
  background-color: #ccc !important;
}
.vue-slider-process {
  background-color: #008cff;
}
</style>
